<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>小时倒计时</title>
    <style>
        .box{
            float:left;
            font-weight:bold;
            border:1px solid;
            font-size:24px;
            padding-left:20px;
            margin-left:20px;
            width:50px;
            height:30px;
        }
    </style>
</head>
<body>
    <h1>小时倒计时</h1>
    <button onclick="star()">计时开始</button>
    <hr>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div> 
<div class="box" id="box3"></div> 

<script>
            var num = 5000;
    function star(){
            var a = document.getElementById('box1');
            var b = document.getElementById('box2');
            var c = document.getElementById('box3');
            var ch = c.innerHTML;
            var bh = b.innerHTML;

            // document.getElementById('box2').innerHTML = 4999%60;
            function time(){
            if (num == 0) {
                clearInterval(r);return;
            }
                num -= 1;
            document.getElementById('box1').innerHTML = Math.floor(num/3600);
            document.getElementById('box2').innerHTML = Math.floor((num/60)%60);
            document.getElementById('box3').innerHTML = Math.floor(num%60);
                console.log(num);
                // return num;
                
            }
            var r = setInterval(time,1000);
                
    }

</script>
    

</body>
</html>